<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:color="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>注册页面</title>

    <link href="../css/bootstrap.css" rel="stylesheet"/>
    <link href="../css/font-awesome.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/4.7.0/css/font-awesome.css">
    <!--    <link rel="stylesheet" href="../css/element/index.css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

    <script src="../js/element/index.js"></script>
    <!--        <script src="../js/vue2.6.11/vue.js"></script>-->
    <script src="../js/vue2.6.11/axios.js"></script>

    <style>
        html { height: 100%; }

        [v-cloak] {
            display: none;
        }

        .table th, .table td {
            text-align: center !important;
            vertical-align: middle !important;
        }

        .has {
            color: white;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader{
            text-align: center;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader .el-upload__input {
            display: none;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 150px;
            line-height: 150px;
            text-align: center;
        }

        .avatar {
            width: 150px;
            height: 150px;
            display: block;
        }
    </style>
</head>
<body style="background:url('../img/bg.jpg') no-repeat; background-size: cover;">
<div id="app" class="container" v-cloak>
    <div class="row text-center " style="padding-top:80px;">
        <div class="col-md-12">
            <h2 style="color: white">欢迎注册</h2>
        </div>
    </div>
    <div class="row ">

        <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">

            <div class="panel-body">
                <img src="http://localhost:8080/photos/admin/51ddd6f4-5f56-4463-924e-6edf046bbdc7.jpg" />
                <form role="form">
                    <hr/>
                    <br/>
                    <el-upload class="avatar-uploader"
                               action="/adminUpload"
                               :auto-upload="autoUpload"
                               name="imgFile"
                               :on-success="handleAvatarSuccess"
                               :before-upload="beforeAvatarUpload"
                               :show-file-list="false">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <img id="img1" :src="imageUrl" >
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="fa fa-tag"></i></span>
                        <input type="text" class="form-control" v-model="user.userTel" placeholder=" 用户名(手机号)"/>
                    </div>
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                        <input type="password" class="form-control" v-model="user.userPwd" placeholder=" 密码"/>
                    </div>
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="fa fa-check-square-o"></i></span>
                        <input type="text" class="form-control" v-model="user.userName" placeholder=" 真实姓名"/>
                    </div>
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="fa fa-intersex"></i></span>
                        <input type="text" class="form-control" v-model="user.userSex" placeholder=" 性别"/>
                    </div>

                    <div class="form-group">
                        <label class="checkbox-inline">
                        </label>
                        <span class="pull-right"></span>
                    </div>

                    <div style="text-align: center">
                        <a href="javascript:void(0)" class="btn btn-primary" @click="register()">注册</a>
                    </div>
                    <br>
                    <div style="text-align: center">
                        <span class="has">已注册 ?</span> <a href="login.html">点击这里 </a>
                    </div>
                    <hr/>

                </form>
            </div>

        </div>
    </div>
</div>


<script>
    new Vue({
        el: '#app',
        data() {
            return {
                autoUpload:true,
                imageUrl: null,
                user: {
                    logoLink:'',
                    userTel:'',
                    userPwd:'',
                    userName:'',
                    userSex:''
                }

            };
        },
        methods: {
            handleAvatarSuccess(res, file) {
                // alert(res);
                this.imageUrl = "http://localhost:8080/photos/admin/"+res;
          //    this.imageUrl = "http://localhost:8080/photos/admin/962e9983-2e03-4135-b442-63ffdf9110be.jpg";

                alert(this.imageUrl);
                this.user.logoLink = this.imageUrl;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isPNG) {
                    this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return (isJPG || isPNG) && isLt2M;
            },
            register(){
                axios.post("/adminRegister",this.user).then(res=>{
                    // alert(res.data)
                    if(res.data === "kong"){
                        alert("用户名或密码不能为空")
                    }
                    else if(res.data === "illegal"){
                        alert("用户名不合法，请重新输入")
                        this.user = {}
                    }
                    else if(res.data === "has"){
                        alert("该用户已注册，请直接登录")
                        window.location = "login.html";
                    }
                    else if(res.data === "no"){
                        alert("注册失败")
                    }
                    else if(res.data === "yes"){
                        alert("注册成功，去登录")
                        window.location="login.html";
                    }
                })
            }

        }
    });
</script>
</body>
</html>











